var map;
var map2;
var mapZoom=17;
var centerX=23.1393734196068;
var centerY=113.271145820618;
var marker =new google.maps.Marker({
    position: new google.maps.LatLng(1,1),
    map: map2,
    icon: "mapfiles/rotate.png",
    title:"",
});;
function Demo() { }
 Demo.prototype.tileSize = new google.maps.Size(256, 256);//瓦片大小
 Demo.prototype.maxZoom = 19;//允许最大缩放层级
 Demo.prototype.minZoom = 13;//允许最小缩放层级
 Demo.prototype.name = "地图";
 Demo.prototype.getTile = function (coord, zoom, ownerDocument) {
   var img = ownerDocument.createElement("img");
   img.style.width = this.tileSize.width + "px";
   img.style.height = this.tileSize.height + "px";
   //定义瓦片的相对路径
   var strURL = 'satellite/';
   //其中zoom为层级，x可以理解为该瓦片在整个地图中的列数，y为行数，图片格式下载的时候选择png或者jpg，我这里是png格式
   strURL += zoom + "/" + coord.x + "/" + coord.y + '.jpg';
   img.src = strURL;
   return img;
 };
 var localMap = new Demo();
 var satel=new Demo();
 satel.name='卫星影像';
 satel.getTile = function (coord, zoom, ownerDocument) {
   var img = ownerDocument.createElement("img");
   img.style.width = this.tileSize.width + "px";
   img.style.height = this.tileSize.height + "px";
   var strURL = 'street/';
   strURL += zoom + "/" + coord.x + "/" + coord.y + '.jpg';
   img.src = strURL;
   return img;
 };
 function initialize(){
	 var myOptions = {
     center: new google.maps.LatLng(23.1393734196068,113.271145820618), //地图中心坐标
     zoom: 17,    //地图层级
     mapTypeControlOptions: {
     mapTypeIds: ['satel', 'localMap']
  }
 };
 map = new google.maps.Map(document.getElementById("allmap"), myOptions);
 map.mapTypes.set('satel', satel);
 map.setMapTypeId('satel'); //设置默认显示的地图为卫星影像
 google.maps.event.addListener(map,'zoom_changed',function (event){ 
 mapZoom = map.getZoom();
 console.log(mapZoom);
  if(mapZoom==19 || mapZoom==17 || mapZoom==15 || mapZoom==13 ){
	   initializeB();
	  }
     if(mapZoom==19){
         var html = '当前层级:'+mapZoom+'';
         var html1= '地图瓦片数量：20384片';
         $('.number').text(html);
         $('.page').text(html1);
     };
     if(mapZoom==17){
         var html = '当前层级:'+mapZoom+'';
         var html1= '地图瓦片数量：20384片';
         $('.number').text(html);
         $('.page').text(html1);
     }
     if(mapZoom==15){
         var html = '当前层级:'+mapZoom+'';
         var html1= '地图瓦片数量：20384片';
         $('.number').text(html);
         $('.page').text(html1);
     }
     if(mapZoom==13){
         var html = '当前层级:'+mapZoom+'';
         var html1= '地图瓦片数量：20384片';
         $('.number').text(html);
         $('.page').text(html1);
     }
  
});
  google.maps.event.addListener(map,'click',function (event){
	  mapZoom = map.getZoom();
  });
  google.maps.event.addListener(map, 'dragend',
  function(event) {
	 var center;
     map.getCenter();
	 center=map.getCenter();
	 centerX=center.Ua;
	 centerY=center.Va;
	 initializeB();
	
});
}

function initializeB(){
     myOption = {
     center: new google.maps.LatLng(centerX,centerY), //地图中心坐标
     zoom: mapZoom,    //地图层级
     mapTypeControl: true,  //默认右上角显示地图名称
     mapTypeControlOptions: {
     mapTypeIds: ['satel', 'localMap']
  }
 };
 var map2 = new google.maps.Map(document.getElementById("toplayerB"), myOption);
 map2.mapTypes.set('localMap', localMap);
 map2.setMapTypeId('localMap'); //设置默认显示的地图为卫星影像

//点击Maker标注显示InfoWindow

google.maps.event.addListener(map2, 'click', function(event) {
        marker.setMap(null);
	var jwd=event.latLng.lng()+','+event.latLng.lat();
	var latLng=event.latLng.lng();
	var latLat=event.latLng.lat();
    $.ajax({
        type:"GET",
        url:'service/showMark/'+latLng+'/'+latLat,
        success: function (data) {
            console.log(data);
            if(data.dataObj){
                marker =new google.maps.Marker({
                    position: new google.maps.LatLng(latLat,latLng),
                    map: map2,
                    icon: "mapfiles/rotate.png",
                    title:data.dataObj[0].markName,
                });
                var contentString = '<div id="content">'+
                    '<div id="siteNotice">'+
                    '</div>'+
                    '<h3 id="firstHeading" class="firstHeading">'+data.dataObj[0].markName+'</h3>'+
                    '<div id="bodyContent">'+
                    '<p>'+data.dataObj[0].markDesc+
                    '</p>'+
                    '</div>'+
                    '</div>';
                var infowindow = new google.maps.InfoWindow({
                    content: contentString, //显示内容
                    maxWidth:400 //定义最大宽度
                });
                infowindow.open(map2,marker);
            }
        }
    })

});
}
function mapInfo(){
    var InitialLong=$("#InitialLon").val();
    var StartLat=$("#StartLat").val();
    var endLong=$("#endLong").val();
    var endLat=$("#endLat").val();
    var layerNumber = mapZoom;
    $(".model").show();
    $.ajax({
        type:'GET',
        url:'/service/showMapInfo?zoom='+layerNumber+'&startLng='+InitialLong+'&startLat='+StartLat+'&endLng='+endLong+'&endLat='+endLat,
        success: function (data) {
            var dataInfo=data.dataObj;
            console.log(dataInfo);
            $("#left-top").val(dataInfo.startLng);
            $("#left-bottom").val(dataInfo.startLat);
            $("#right-top").val(dataInfo.endLng);
            $("#right-bottom").val(dataInfo.endLat);
            if(dataInfo.mapMarkInfoList.length!=0){
                $(".poiInfo").css('display','block');
                for(var i=0; i<dataInfo.mapMarkInfoList.length; i++){
                    var html='<li>'+dataInfo.mapMarkInfoList[i].markName+'</li>';
                    html+='<li>'+dataInfo.mapMarkInfoList[i].markDesc+'</li>';
                    $(".markInfo").append(html);
                }
            };
            for(var j=0; j<dataInfo.tileMapUrlList.length; j++){
                var htm='<li>'+dataInfo.tileMapUrlList[j]+'</li>'
                $('.picList').append(htm);
            }

        }
    })

}
function close(){
    $(".model").css('display','none');
    $("#left-top").val("");
    $("#left-bottom").val("");
    $("#right-top").val("");
    $("#right-bottom").val("");
    $(".markInfo").html("");
    $('.picList').html("");
}
function slide(){
    $(".inputNumber").slideToggle();
}